/* eslint-disable import/no-extraneous-dependencies */
import React, { useEffect, useMemo, useCallback } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import Query from './Query';
import useMakeList from './hooks/useMakeList';
import useInitColumns from './hooks/useInitColumns';

function List({ paginationData, dispatch }) {
  const { pagination, setPagination, setExtraParams, loading, getList, list } = useMakeList();

  const handleTableChange = useCallback(
    pagination => {
      setPagination(pagination);
      getList();
      dispatch({
        type: 'global/saveTableInfo',
        payload: {
          paginationData: pagination,
        },
      });
    },
    [setPagination, getList],
  );

  const columns = useInitColumns({});

  useEffect(() => {
    getList();
  }, []);

  useEffect(() => {
    setPagination(paginationData);
  }, []);

  const paginationConfig = useMemo(
    () => ({
      total: pagination.total,
      current: pagination.current,
      pageSize: pagination.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: () => `共 ${pagination?.total ?? 0} 条`,
    }),
    [pagination],
  );

  return (
    <div className="asa-page-gen-wrapper">
      <Query getList={getList} setExtraParams={setExtraParams} setPagination={setPagination} />
      <Table
        size="middle"
        rowKey="id"
        scroll={{ x: 2600 }}
        columns={columns}
        dataSource={list}
        pagination={paginationConfig}
        onChange={handleTableChange}
        loading={loading}
      />
    </div>
  );
}
export default connect(({ global }) => ({ paginationData: global.paginationData }))(List);
